<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app"></div>

  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
  /**
   * beforeCreate
   * created
   * beforeMount
   * mounted
   * beforeUpdate
   * updated
   * activated
   * deactivated
   * beforeDestroy
   * destroyed
   * */
      var Test={
        template:`
          <div>
            我是test组件 {{text}}
            <button @click=" text=text+1; ">点我</button>
          </div>
        `,
        data:function(){
          return {
            text:"hello world"
          }
        },
        /*beforeCreate:function(){
          //组件创建之前
          console.log(this.text)
        },
        created:function(){
          //组件创建之后
          console.log(this.text)
        },
        */
        /**
         * 使用该组件，就会触发以上的事件函数（钩子函数）
         * created中可以操作数据..
         * 并且可以实现vue->页面的影响，应用：发起ajax请求
         * */

         /*beforeMount:function(){
           //console.log(document.body.innerHTML)
          console.log('装载DOM之前')
         },
         mounted:function(){
           //console.log(document.body.innerHTML)
           console.log('装载DOM之后')
         },
         */
         /** 只执行一次
          * beforeMount:  vue启动前的DOM
          * mounted:  vue启动后的DOM
          * */

         /*beforeUpdate:function(){ //改变前
           console.log(document.body.innerHTML)
         },
         updated:function(){ //改变后
           console.log(document.body.innerHTML)
         },
         */
         /**
          * 当数据更新才会触发
          * beforeUpdate   获取原DOM
          * updated   获取新DOM
          * */
         beforeDestroy:function () { //销毁之前
           console.log('beforeDestroy')
         },
         destroyed:function () { //销毁之后
           console.log('destroyed')
         },
         /**
          * 销毁，最终都是做一些其他功能的释放，比如localStorage
          * */
         activated:function(){
           console.log('组件被激活')
         },
         deactivated:function(){
           console.log('组件被停用')
         }
  }

      var App={
        components:{
          test:Test
        },
        template:`
          <div>
             <keep-alive>
               <test v-if="isExist"></test>
             </keep-alive>
             <button @click=" isExist = !isExist">事关子组件的生死</button>
          </div>
        `,
        data:function(){
          return {
            isExist:true
          }
        }
      }
      new Vue({
        el:'#app',
        components:{
          app:App
        },
        template:'<app/>'
      })
  </script>
</body>
</html>
